<!DOCTYPE html>
<html class="ui-page-login">

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<link href="css/mui.min.css" rel="stylesheet" />
		<link href="css/style.css" rel="stylesheet" />
		<style>
			.area {
				margin: 20px auto 0px auto;
			}
			
			.mui-input-group:first-child {
				margin-top: 20px;
			}
			
			.mui-input-group label {
				width: 26%;
			}
			
			.mui-input-row label~input,
			.mui-input-row label~select,
			.mui-input-row label~textarea {
				width: 78%;
			}
			
			.mui-checkbox input[type=checkbox],
			.mui-radio input[type=radio] {
				top: 6px;
			}
			
			.mui-content-padded {
				margin-top: 25px;
			}
			
			.mui-btn {
				padding: 10px;
			}
			.agreement{
				padding-left: 30px;
				padding-right: 30px;
				line-height: 25px;
			}
			.agreement a{
				color: white;
			}
			.mui-input-group label {
				line-height: 30px;
				font-size: 15px;
				background-repeat: no-repeat;
				background-size: 20px;
			}
			.mobile label{
				width: 37%;
				background-position-x: 80px;
				background-position-y: 15px;
				background-image: url(images/input/right@2x.png);
			}
			.verification label{
			
				width: 20%;
				background-position-x: 25px;
				background-position-y: 15px;
				background-image: url(images/input/verificationcode@2x.png);
			}
			
			.mobile  label~input{
				width: 60%;
			}
			.verification  label~input{
				width: 80%;
			}
			#register-form .mui-input-row:last-child:after{
				background-color: transparent;
			}
			
			#code-btn{
				width: 94%;
				border-radius:30px;
				border:1px solid rgba(255,199,19,1);
				background-color: transparent;
				color: #FFC713;
			}
			#reg-btn{
				width: 94%;
				border-radius:30px;
				border:1px solid rgba(255,199,19,1);
				background-color: transparent;
				color: #FFC713;
				display: none;
			}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back nav-btn-back"><img src="images/nav/icon_back.png"></img></a>
		</header>
		<h2 class="title">请输入手机号</h2>
		<p class="agreement">注册表示您同意<a>莫孤个人信息保护政策</a>和<a>莫孤服务使用协议</a></p>
		<div class="mui-content">
			<form class="mui-input-group" id="register-form">
				<div class="mui-input-row mobile">
					<label>中国 +86</label>
					<input id='mobile' type="text" class="mui-input-clear mui-input" placeholder="输入手机号">
				</div>
				<div class="mui-input-row verification">
					<label></label>
					<input id='code' type="text" class="mui-input-clear mui-input" placeholder="请输入验证码">
				</div>
				<div class="mui-input-row ">
					<a class="sms-link" id="mobile-password">用账号密码登陆</a>
				</div>
			</form>
			<div class="mui-content-padded">
				<button id='code-btn' class="mui-btn mui-btn-block ">获取验证码</button>
				<button id='reg-btn' class="mui-btn mui-btn-block">登陆</button>
			</div>
		</div>
		<script src="js/mui.min.js"></script>
		<script src="js/app.js"></script>
		<script>
			(function($, doc) {
				$.init();
				
				
				$('.mui-input-row').on('tap','#mobile-password',function(){
				  	$.openWindow("login.html");
				}) ;
				
				$.ready(function() {
					console.log("hello world!");
					var settings = app.getSettings();
					var regButton = doc.getElementById('reg-btn');
					var codeButton = doc.getElementById('code-btn');
					var mobileBox = doc.getElementById('mobile');
					var codeBox = doc.getElementById('code');

					var emailBox = doc.getElementById('email');
					
					codeButton.addEventListener('tap', function(event) {
						var info = {
							mobile: mobileBox.value
						};
		
						app.sms(info, function(result) {
							$.toast(result);
							codeButton.style.display = "none";
							regButton.style.display = "inline-block";
							
						},function(result){
							$.toast(result);	
						});
					});
					
					
					regButton.addEventListener('tap', function(event) {
						var info = {
							mobile: mobileBox.value,
							code: codeBox.value
						};
			
						app.register(info, function(user) {	
							localStorage.setItem("user",user);
							$.openWindow({
								url: 'init.html',
								id: 'init',
								show: {
									aniShow: 'pop-in'
								}
							});
							
						},function(result){
							$.toast(result);
							regButton.style.display = "none";
							codeButton.style.display = "inline-block";
						});
					});
					
				});
			}(mui, document));
		</script>
	</body>

</html>